Vue.component('tabbar-component', {
    delimiters: ['[[', ']]'], // 添加Vue.js的模板分隔符
    template: `
        <div class="tabbar">
            <a href="/rzwl/" :class="{ 'tabbar-item': true, 'active': activePage === 'index' }">
                <img :src="activePage === 'index' ? '/rzwl/static/images/tabbar/home-active.png' : '/rzwl/static/images/tabbar/home.png'" alt="首页" class="tabbar-icon">
                <span>首页</span>
            </a>
            <a href="/rzwl/enroll" :class="{ 'tabbar-item': true, 'active': activePage === 'enroll' }">
                <img :src="activePage === 'enroll' ? '/rzwl/static/images/tabbar/enroll-active.png' : '/rzwl/static/images/tabbar/enroll.png'" alt="报名" class="tabbar-icon">
                <span>报名</span>
            </a>
            <a href="/rzwl/me" :class="{ 'tabbar-item': true, 'active': activePage === 'me' }">
                <img :src="activePage === 'me' ? '/rzwl/static/images/tabbar/me-active.png' : '/rzwl/static/images/tabbar/me.png'" alt="我的" class="tabbar-icon">
                <span>我的</span>
            </a>
        </div>
    `,
    computed: {
        activePage() {
            const path = window.location.pathname;
            if (path.includes('/rzwl/enroll')) {
                return 'enroll';
            } else if (path.includes('/rzwl/me')) {
                return 'me';
            } else {
                return 'index'; // 默认首页
            }
        }
    }
});
